<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./../home.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">
    <ui:define name="content" >
        <div class="col-lg-12">
            <h3 class="page-header" id="comercio">
                Administracion de 
                <h:outputText value="Perros" style="color:#00BFFF;" />
                <h:link value="Regresar a Listado" outcome="list.xhtml" styleClass="pull-right" style="font-size: 16px; margin-right: 30px;"  />
            </h3>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <p:tabView id="tabView">  

                    <p:tab id="tab1" title="Datos">
                        <h:messages id="msg" globalOnly="true" styleClass="list-group" infoClass="list-group-item list-group-item-success"
                                    errorClass="list-group-item list-group-item-danger" />
                        <div class="row" id="modificarComercio">
                            <div class="col-lg-8 col-lg-offset-1">
                                <h:form id="frmRegistrarUser" styleClass="form-horizontal" >
                                    <f:event type="preRenderView" listener="#{perroBean.initUpdate}" />
                                    <div class="form-group has-feedback">
                                        <label for="nombre" class="col-sm-5 control-label" style="text-align: right;" >Nombre :</label>
                                        <div class="col-sm-5">
                                            <p:inputText styleClass="form-control" id="nombre" value="#{perroBean.perro.nombre}" />
                                        </div>						    
                                    </div>

                                    <div class="form-group has-feedback"> 
                                        <label for="rol" class="col-sm-5 control-label" style="text-align: right;">Raza :</label>
                                        <div class="col-sm-5">
                                            <h:selectOneMenu id="rol" value="#{perroBean.raza.id}" styleClass="form-control" >
                                                <f:selectItem noSelectionOption="true" itemLabel="Seleccionar" itemValue="0" />
                                                <f:selectItems value="#{perroBean.razas}" var="list" itemLabel="#{list.descripcion}" itemValue="#{list.id}" />
                                                <f:ajax event="change" render="ActColor" listener="#{perroBean.definirColor}" />
                                            </h:selectOneMenu>

                                            <span class="glyphicon-remove form-control-feedback">
                                                <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                            </span>
                                        </div>						

                                    </div>
                                    
                                    <h:panelGroup id="ActColor">
                                        <h:panelGroup  rendered="#{perroBean.activateColor eq true}">
                                            <div class="form-group has-feedback">
                                                <label for="color" class="col-sm-5 control-label" style="text-align: right;">Color :</label>
                                                <div class="col-sm-5">
                                                    <h:selectOneMenu value="#{perroBean.color.id}" styleClass="form-control">
                                                        <f:selectItems value="#{perroBean.colores}" var="col" itemLabel="#{col.nombreColor}" itemValue="#{col.id}" />
                                                    </h:selectOneMenu>
                                                    <span class="glyphicon-remove form-control-feedback">
                                                        <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                                    </span>
                                                </div>						
                                            </div>
                                        </h:panelGroup>
                                    </h:panelGroup>

                                    <div class="form-group has-feedback">
                                        <label for="color" class="col-sm-5 control-label" style="text-align: right;">Sexo :</label>
                                        <div class="col-sm-5">
                                            <h:selectOneMenu value="#{perroBean.perro.sexo}" styleClass="form-control" >
                                                <f:selectItem itemValue="1" itemLabel="Macho" />
                                                <f:selectItem itemValue="2" itemLabel="Hembra" />
                                            </h:selectOneMenu>
                                        </div>						
                                    </div>
                                    
                                    <div class="form-group has-feedback">
                                        <label for="fechaNaci" class="col-sm-5 control-label" style="text-align: right;">Fecha de nacimiento :</label>
                                        <div class="col-sm-5"  style="width: 38.66666666666667%">
                                            <p:calendar  value="#{perroBean.fecha}"  style="font-size: 13px;"  navigator="true"  locale="es" id="popupButtonCal" maxdate="#{perroBean.fechaActual}" readonlyInput="true"  showOn="button" pattern="dd/MM/yyyy"   >
                                            </p:calendar>
                                            <span class="glyphicon-remove form-control-feedback" style="padding-right: 10px;">
                                                <i  style="color: red;font-size: 20px;font-weight: bold;">*</i>
                                            </span>
                                        </div>						

                                    </div>

                                    <div class="form-group has-feedback">
                                        <label for="pedigree" class="col-sm-5 control-label" style="text-align: right;">Pedigree :</label>
                                        <div class="col-sm-5">
                                            <p:selectBooleanCheckbox id="pedigree" value="#{perroBean.perro.pedigree}" />
                                        </div>						
                                    </div>
                                    <div class="form-group has-feedback">
                                        <label for="tipo" class="col-sm-5 control-label" style="text-align: right;">Adquirido por :</label>
                                        <div class="col-sm-6">
                                            <h:selectOneMenu value="#{perroBean.flagDueño}" styleClass="form-control"  >
                                                <f:selectItem itemValue="#{con_bundle.prop_muni}" itemLabel="#{con_bundle.msg_muni}" />
                                                <f:selectItem itemValue="#{con_bundle.prop_dueño}" itemLabel="#{con_bundle.msg_dueño}" />
                                                <f:ajax event="change" render=":tabView:frmRegistrarUser:panelgrop :tabView:frmRegistrarUser:panelbusqueda" />
                                            </h:selectOneMenu>

                                        </div>						
                                        <h:panelGroup id="panelbusqueda">
                                            <div class="col-sm-1" style="padding-left: 0px;">
                                                <p:commandButton icon="icon-find" id="btnbusqueda" rendered="#{perroBean.flagDueño eq con_bundle.prop_dueño}" oncomplete="dlg.show();" />
                                            </div>
                                        </h:panelGroup>
                                    </div>

                                    <h:panelGroup id="panelgrop">
                                        <h:panelGroup  rendered="#{perroBean.flagDueño eq con_bundle.prop_dueño}">
                                            <div class="form-group has-feedback">
                                                <label for="nombred" class="col-sm-5 control-label" style="text-align: right;">Nombres del Donante :</label>
                                                <div class="col-sm-5">
                                                    <p:inputText styleClass="form-control" id="nombred" disabled="true" value="#{perroBean.amo.nombre}" />
                                                </div>						
                                            </div>
                                            <div class="form-group has-feedback">
                                                <label for="appd" class="col-sm-5 control-label" style="text-align: right;">Apellidos del Donante :</label>
                                                <div class="col-sm-5">
                                                    <p:inputText styleClass="form-control" id="appd" disabled="true" value="#{perroBean.amo.apellido}" />
                                                </div>						
                                            </div>
                                            <div class="form-group has-feedback">
                                                <label for="dni" class="col-sm-5 control-label" style="text-align: right;">DNI del Donante :</label>
                                                <div class="col-sm-5">
                                                    <p:inputMask id="dni" styleClass="form-control" disabled="true" value="#{perroBean.amo.dni}" mask="9?9999999" placeHolder="" />
                                                </div>						
                                            </div>
                                        </h:panelGroup>
                                    </h:panelGroup>
                                    <div class="form-group has-feedback">
                                        <label  class="col-sm-5 control-label" style="text-align: right;">Fecha de Registro :</label>
                                        <div class="col-sm-5">
                                            <p class="form-control-static">#{perroBean.perro.fechaRegistro}</p>
                                        </div>						
                                    </div>
                                    <div class="form-group has-feedback">
                                        <label  class="col-sm-5 control-label" style="text-align: right;">Fecha de Actualizaci&oacute;n :</label>
                                        <div class="col-sm-5">
                                            <p class="form-control-static">#{perroBean.perro.fechaActualizacion}</p>
                                        </div>						
                                    </div>
                                    <p:commandButton value="Actualizar" styleClass="btn btn-primary" actionListener="#{perroBean.actualizarPerro}" update="@form :tabView:msg" />
                                </h:form>
                            </div>
                        </div>
                    </p:tab>  

                    <p:tab id="tab2" title="Imagen">  
                        <div class="row" id="modificarImagen">
                            <div class="col-lg-8 col-lg-offset-1">
                                <h:messages id="msgg" globalOnly="true" styleClass="list-group" infoClass="list-group-item list-group-item-success"
                                            errorClass="list-group-item list-group-item-danger" />
                                <br />
                                <p:graphicImage id="image" value="/img/#{perroBean.perro.foto}" />
                                <h:form id="frmFoto" enctype="multipart/form-data">
                                    <p:fileUpload fileUploadListener="#{perroBean.subirFoto}"
                                                  mode="advanced" 
                                                  multiple="false" 
                                                  sizeLimit="10240000"
                                                  update=":tabView:msgg :tabView:image"
                                                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                                  auto="false" 
                                                  cancelLabel="Cancelar" uploadLabel="Subir" label="Escoger"/>  
                                </h:form>
                            </div>
                        </div>
                    </p:tab>  

                </p:tabView>  
            </div>
        </div>
        <p:dialog modal="true" widgetVar="dlg" position="center top" resizable="false">
            <h:form id="listDonantes">
                <p:dataTable value="#{perroBean.amos}" var="list" 
                             paginator="true" rows="10" lazy="true" rowIndexVar="rowIndex"
                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" >
                    <p:column style="text-align: center;">
                        <p:commandButton icon="icon-choice" actionListener="#{perroBean.capturar(list.id)}" update=":tabView:frmRegistrarUser:panelgrop" oncomplete="dlg.hide();" />
                    </p:column>
                    <p:column headerText="Nombre" style="text-align: center;">
                        <h:outputText value="#{list.nombre}" />
                    </p:column>
                    <p:column headerText="Apellido" style="text-align: center;">
                        <h:outputText value="#{list.apellido}" />
                    </p:column>
                    <p:column headerText="DNI" style="text-align: center;">
                        <h:outputText value="#{list.dni}" />
                    </p:column>

                </p:dataTable>
            </h:form>
        </p:dialog>
        
        <script type="text/javascript">
            PrimeFaces.locales['es'] = {
                closeText: 'Cerrar',
                prevText: 'Anterior',
                nextText: 'Siguiente',
                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
                dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
                weekHeader: 'Semana',
                firstDay: 1,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: '',
                timeOnlyTitle: 'Sólo hora',
                timeText: 'Tiempo',
                hourText: 'Hora',
                minuteText: 'Minuto',
                secondText: 'Segundo',
                currentText: 'Fecha actual',
                ampm: false,
                month: 'Mes',
                week: 'Semana',
                day: 'Día',
                allDayText: 'Todo el día'
            };
        </script> 

    </ui:define>


</ui:composition>

